<template>
<div class="login">
	<div class="signinpanel">
		<div class="con">
			<div>
				<img src="../assets/img/login.png" alt="">
			</div>
			<div class="right">
				<div class="col-sm-12">
				<h3 class="no-margins">王先生管理系统</h3>
				<div class="form-group">
					<div class="img">
						<img src="../assets/img/login(1).png" alt="">
					</div>
					<input type="text" class="form-control" placeholder="用户名" v-model="account">
				</div>
				<div class="form-group">
					<div class="img">
						<img src="../assets/img/suo.png" alt="">
					</div>
					<input type="password" class="form-control" placeholder="密码" v-model="password">
				</div>
				<div class="row">
					
						<el-checkbox v-model="checked" class="mian">一个月内免登录</el-checkbox>
					
					<div class="password">忘记密码</div>
				</div>
				<button type="submit" class="btn" @click="godindex">登 录</button>
				<div class="zhuce">
					<div class="zhuce1">本院医生申请注册</div>
					<div class="zhuce2">外部医生申请注册</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				checked: true
			}
		},
		methods: {
			godindex() {
				this.axios.get('/audit/loginIn?account=' + this.account + '&password=' + this.password).then(res => {
					console.log(res)
					if (res == 1) {
						this.$router.push('/')
						this.$message({
							message: '登录成功',
							type: 'success'
						});
						return
					}
					if(res != 1){
						this.$message({
							message: '账号密码不正确',
							type: 'error'
						});
						return
					}
				})
			}
		}
	}
</script>

<style scoped>
.login{
	background: red;
	height: 1088px;
}
.signinpanel {
	background: white;
	position: absolute;
    margin: 15% 25%;
}


.con{
	display: flex;
	flex-direction: row;
}
.right{
	width: 460px;
}
.no-margins{
	padding-top: 110px;
	    font-weight: 600;
}    
.form-group{
width: 70%;
    margin-bottom: 10px;
display: flex;
	flex-direction: row;
	background: rgb(240,241,253);
	    border-radius: 8px;
} 
.img{
	    padding-top: 6px;
    padding-left: 10px;
}
.form-group img{
	width: 20px;
	height: 20px;
}
.form-group input{
	border: none;
	background: rgb(240,241,253);
padding-top: 6px;
outline: none;
}
.form-group input:focus{
	box-shadow: none;
}
.row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.mian{
	width: 30%;
}
.password{
	width: 48%;
	    font-size: 15px;
		color: red;
}
.btn{
    width: 56%;
    margin-left: 5%;
	background: red;
	color: #ffff;
	margin-top: 5%;
}
.zhuce{
	display: flex;
	flex-direction: row;
	color: red;
	    margin-top: 4%;
}
.zhuce1{
	width: 43%;
}
.zhuce2{
	width: 30%;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
	background-color: red;
    border-color: red !important;
}
/deep/.el-checkbox__inner{
	border:1px solid red;
}
/deep/.el-checkbox__input.is-focus .el-checkbox__inner{
	border-color: red !important;
}
/deep/.el-checkbox__input.is-checked+.el-checkbox__label{
color: red;
}
</style>
